<div class="mx-auto mt-6 text-center">
  <h1 class="text-3xl font-black">Register your 30-day unlimited-use free trial</h1>
  <div class="text-xl font-medium">Set up privacy-friendly analytics with just a few clicks</div>
</div>

<div>
  <div class="w-full max-w-3xl mt-4 mx-auto flex">
    <%= form_for @changeset, "/register", [class: "w-full max-w-md mx-auto bg-white shadow-md rounded px-8 py-6 mb-4 mt-8", id: "register-form"], fn f -> %>
      <h2 class="text-xl font-black">Enter your details</h2>
      <div class="my-4">
        <%= label f, :name, "Full name", class: "block text-gray-700 text-sm font-bold mb-2" %>
        <%= text_input f, :name, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "Jane Doe" %>
        <%= error_tag f, :name %>
      </div>
      <div class="my-4">
        <%= label f, :email, class: "block text-gray-700 text-sm font-bold mb-2" %>
        <p class="text-gray-600 text-xs mt-1 mb-2">No spam, guaranteed.</p>
        <%= email_input f, :email, class: "transition bg-gray-100 appearance-none border border-transparent rounded w-full p-2 text-gray-700 leading-normal appearance-none focus:outline-none focus:bg-white focus:border-gray-300", placeholder: "example@email.com" %>
        <%= error_tag f, :email %>
      </div>

      <%= if PlausibleWeb.Captcha.enabled?() do %>
        <div class="mt-4">
          <div class="h-captcha" data-sitekey="<%= PlausibleWeb.Captcha.sitekey() %>"></div>
          <%= if assigns[:captcha_error] do %>
            <div class="text-red-500 text-xs italic mt-3"><%= @captcha_error %></div>
          <% end %>
          <script src="https://hcaptcha.com/1/api.js" async defer></script>
        </div>
      <% end %>

      <%= submit "Start my free trial →", class: "button mt-4 w-full" %>

      <p class="text-center text-gray-600 text-xs mt-4">
        Already have an account? <%= link("Log in", to: "/login", class: "underline text-gray-800") %> instead.
      </p>
    <% end %>
    <div class="pt-12 pl-8 hidden md:block">
      <ul class="mt-2 leading-loose">
        <li>
          <svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          Quick and easy to set up
        </li>
        <li>
          <svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          No credit card required
        </li>
        <li>
          <svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          Unlimited use during the trial
        </li>
        <li>
          <svg class="feather text-indigo-600 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
            <polyline points="22 4 12 14.01 9 11.01"/>
          </svg>
          From just $6/mo after the trial
        </li>
      </ul>
    </div>
  </div>
</div>
